<template>
  <!-- <div class="normal-player" v-show="$store.getters.isFullScreen"> -->
  <transition :css="false" @enter="enter" @leave="leave">
    <div class="normal-player" v-show="this.isFullScreen">
      <div class="player-wrapper">
        <!-- 播放头部 -->
        <player-header></player-header>
        <!-- 播放内容 -->
        <playerMiddle :currentTime="currentTime"></playerMiddle>
        <!-- 进度条 -->
        <PlayerBottom :totalTime="totalTime" :currentTime="currentTime"></PlayerBottom>
      </div>
      <div class="player-bg">
        <img :src="currentSongs.picUrl" alt />
      </div>
    </div>
  </transition>
</template>

<script>
import playerHeader from '@/components/player/PlayerHeader'
import playerMiddle from '@/components/player/PlayerMiddle'
import PlayerBottom from '@/components/player/PlayerBottom'
// 导入vuex辅助函数
import { mapGetters, mapActions } from 'vuex'
// 导入动画
import Velocity from 'velocity-animate'
import 'velocity-animate/velocity.ui'
export default {
  props: {
    totalTime: {
      type: Number,
      default: 0,
      require: true
    },
    currentTime: {
      type: Number,
      default: 0,
      require: true
    }
  },
  components: {
    playerHeader,
    playerMiddle,
    PlayerBottom
  },
  methods: {
    ...mapActions(['getSongLyric']),
    enter (el, done) {
      Velocity(el, 'transition.shrinkIn', { duration: 500 }, function () {
        done()
      })
    },
    leave (el, done) {
      Velocity(el, 'transition.shrinkOut', { duration: 500 }, function () {
        done()
      })
    }
  },
  computed: {
    // 映射成局部组件
    ...mapGetters(['isFullScreen', 'currentSongs'])
  },
  watch: {
    // 监听当前播放歌曲是否发生改变
    currentSongs (newValue, oldValue) {
      // 如果没有id 直接return 不获取歌词
      if (newValue.id === '') {
        return
      }
      this.getSongLyric(newValue.id)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/variable";
@import "@/assets/css/mixin";
.normal-player {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  @include bg_sub_color();
  .player-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 999;
  }
  .player-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    img {
      height: 100%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      filter: blur(10px);
    }
  }
}
</style>
